import { type ColumnDef } from '@tanstack/react-table'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import LongText from '@/components/long-text'
import { type Role } from '../data/schema'
import { DataTableColumnHeader } from '@/components/data-table-column-header'
import { DataTableRowActions } from './data-table-row-actions'
import {
  TriangleDownIcon,
  TriangleRightIcon
} from '@radix-ui/react-icons'
import { getRouteApi } from '@tanstack/react-router'
import { ListItem } from '@/components/tree-select/schema'
export const columns: ColumnDef<Role>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && 'indeterminate')
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
        className='translate-y-[2px]'
      />
    ),
    meta: {
      className: cn(
        'sticky md:table-cell left-0 z-10 rounded-tl',
        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
      ),
    },
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
        className='translate-y-[2px]'
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'id',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='主健' />
    ),
    cell: ({ row }) => (
      <div className='w-fit text-nowrap'>{row.getValue('id')}</div>
    ),
    meta: {
      className: cn(
        'sticky md:table-cell left-0 z-10 rounded-tl',
        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
      ),
    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'name',
    meta: {
      className: cn(
        'sticky md:table-cell left-0 z-10 rounded-tl',
        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
      ),
    },
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='名称' />
    ),

    cell: ({ row }) => (
      <div
        style={{
          // Since rows are flattened by default,
          // we can use the row.depth property
          // and paddingLeft to visually indicate the depth
          // of the row
          paddingLeft: `${row.depth}rem`,
        }}
      >
        <div className='w-fit text-nowrap flex  items-center' >
          {row.getCanExpand() && (
            <button {...{
              onClick: row.getToggleExpandedHandler(),
              style: { cursor: 'pointer' },
            }}>
              {row.getIsExpanded() ? <TriangleDownIcon /> : <TriangleRightIcon />}
            </button>
          )}
          {row.getValue('name')}
        </div>
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'rules',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='权限' className='lg:min-w-72' />
    ),

    cell: ({ getValue }) => {
      const routerApi = getRouteApi('/_authenticated/roles/');
      const { ruleList } = routerApi.useLoaderData();
      if (getValue<string>() === '*') {
        return "*";
      }
      const rules_id = getValue<string>().split(',');

      const rules_name = ruleList.filter((rule: ListItem) => {
        return rules_id.includes(String(rule.value))
      })
      return (
        <div className='flex items-center gap-x-2'>
          {rules_name.map((rule: ListItem) => (
            <Badge variant='outline' key={rule.value}>
              <LongText >{rule.name}</LongText>
            </Badge>
          ))}
        </div>
      )
    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'created_at',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='创建时间' />
    ),
    cell: ({ row }) => (
      <div className='w-fit text-nowrap'>{row.getValue('created_at')}</div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'updated_at',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='更新时间' />
    ),
    cell: ({ row }) => (
      <div className='w-fit text-nowrap'>{row.getValue('updated_at')}</div>
    ),
    enableSorting: false,
    enableHiding: false,
  },

  {
    id: 'actions',
    cell: DataTableRowActions,
  },
]
